<template>
  <div class="box3">
    <h2>饿了么</h2>
    <ul>
      <li>全部</li>
      <li>待消费</li>
      <li>待评价</li>
      <li>退款</li>
    </ul>
    <div class="one-box">
      <div class="one">
        <div class="top">
          <img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.a5728598e094c3c8510461869f0f8aae?rik=TDk6BqeFGCjqBw&riu=http%3a%2f%2fpic.ntimg.cn%2f20131025%2f9885883_103407183000_2.jpg&ehk=S9mpWZNSlPecwFcQkO0IXWSzE4sE3XNmuiT3gLzh%2fVU%3d&risl=&pid=ImgRaw&r=0"
            alt=""
          />
          <h3>纯手工饺子馆（风城九路店）</h3>
          <span>已送达</span>
        </div>
        <div class="top-span">
          <span>10减3</span>
          <span>25减10</span>
          <span>50减21</span>
        </div>
        <div class="zhong">
          <div class="img2">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.5f44bb153bd4e37b30b0cca061145c19?rik=VKKu%2fmiimi9VBQ&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20200103%2f30012030_171820111519_2.jpg&ehk=uXZAlKJzPyB2JR35xv8g3AWqplXhbvAh4N%2blUgHfizI%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.f0b5d485a540c695a1e4b094a1cbc659?rik=F2w8cFwXqYbQsA&riu=http%3a%2f%2fimg.mp.itc.cn%2fupload%2f20170610%2fef595913d2684c9bb18dd2b4200c3ff7_th.jpg&ehk=za8lLfgpIJc5UvUPTy0FTOZAPqRiw9Bs2cgCcQGmZ1k%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
          </div>
          <div class="right">
            <h4>￥17.8</h4>
            <p>共2件</p>
          </div>
        </div>
        <div class="xia">
          <span>再来一单</span>
        </div>
      </div>
      <div class="one">
        <div class="top">
          <img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.7c443517469d47e26766f05edb678900?rik=AwEUhhC0dabOEg&riu=http%3a%2f%2fimg.canyin.com%2f2020%2f12%2f3e8Q2c4Wz54S.png&ehk=zvZcGt7CrxIEcOiUIY148uR3NpqZfa135BiW5UM36aM%3d&risl=&pid=ImgRaw&r=0"
            alt=""
          />
          <h3>唐久便利店（风城五路店）</h3>
          <span>已送达</span>
        </div>
        <div class="top-span">
          <span>10减3</span>
          <span>25减10</span>
          <span>50减21</span>
        </div>
        <div class="zhong">
          <div class="img2">
            <img
              src="https://www.jm175.cn/upload/resources/image/2018/10/17/563523_600x600.jpg"
              alt=""
            />
            <img
              src="https://tse3-mm.cn.bing.net/th/id/OIP-C.OQ0DxYgCSNbto7N2fEU73QHaFB?pid=ImgDet&rs=1"
              alt=""
            />
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.02ea5d2f3537f8fe8a0ce3a3009b6513?rik=f29ewZIt0iRslg&riu=http%3a%2f%2fwww.ddmeishi.com%2fuploads%2fallimg%2f200214%2f12-200214135021.jpg&ehk=Y2PvBRu%2fEYtzq1fplXLl9EQUDPwlW7Tj8ibkHZT6QRA%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
          </div>
          <div class="right">
            <h4>￥17.8</h4>
            <p>共2件</p>
          </div>
        </div>
        <div class="xia">
          <span>再来一单</span>
        </div>
      </div>
      <div class="one">
        <div class="top">
          <img
            src="https://uploadfile.bizhizu.cn/2015/0207/20150207113023522.jpg"
            alt=""
          />
          <h3>美羊羊蛋糕（风城六路店）</h3>
          <span>已送达</span>
        </div>
        <div class="top-span">
          <span>10减3</span>
          <span>25减10</span>
          <span>50减21</span>
        </div>
        <div class="zhong">
          <div class="img2">
            <img
              src="https://img.zcool.cn/community/0131e35d1703c6a8012051cddb75f3.jpg@1280w_1l_2o_100sh.jpg"
              alt=""
            />
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.97f8e5d657e44ea96e150091bf69085f?rik=EucMD%2b8C4kpERg&riu=http%3a%2f%2fwdmcake.cn%2fimages%2fupload%2fImage%2f3%E7%BC%A4%E7%BA%B7%E7%9B%9B%E6%9E%9C%E8%9B%8B%E7%B3%95870.jpg&ehk=W5944%2f0zooUa2QUXiPPVm2fcBYSEQCHDwBRWfWvRSu8%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
          </div>
          <div class="right">
            <h4>￥17.8</h4>
            <p>共2件</p>
          </div>
        </div>
        <div class="xia">
          <span>再来一单</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box3 {
  padding: 10px;
  background: antiquewhite;
}
.box3 h2 {
  text-align: center;
}
.box3 ul {
  display: flex;
  height: 40px;
  margin: 10px;
}
.box3 ul li {
  margin-right: 15px;
  text-align: center;
  line-height: 40px;
}
.box3 .one {
  background: white;
  padding: 10px;
  overflow: auto;
}
.one .top {
  display: flex;
  align-items: center;
}
.one .top img {
  width: 40px;
  height: 40px;
  background: blue;
  border-radius: 15px;
  margin-right: 10px;
}
.one .top h3 {
  flex: 1;
}
.one .top-span {
  margin: 10px;
}
.one .top-span span {
  margin: 10px;
  border: 1px solid red;
  padding: 2px 5px;
  border-radius: 10px;
  font-size: 14px;
}
.one .zhong {
  display: flex;
}
.one .zhong .img2 {
  flex: 1;
  margin: 10px;
}
.one .zhong img {
  width: 80px;
  height: 80px;
  background: pink;
  margin-right: 10px;
  border-radius: 10px;
}
.one .zhong .right h4 {
  font-size: 20px;
}
.one .zhong .right p {
  color: rgb(158, 158, 158);
}
.one .xia {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 10px;
  font-size: 20px;
  border-radius: 20px;
  color: blue;
  border: 1px solid blue;
  margin-left: 70%;
}
.one-box {
  height: 570px;
  overflow: auto;
}
</style>